UseRef

useRef 會回傳一個 mutable 的 ref object，.current 屬性為初始為傳入的參數。寫法如下：

const refContainer = useRef(initialValue); //initialValue 為初始值

使用時機：

• 計算 Render 次數
• 直接操作 DOM ：在 html 標籤上加上 ref 屬性，就可以印出 DOM，以下方案例就是可以印出 input DOM
• 抓取 Previous 值

function App() {
  const renderCount = useRef(0); // {current:0}
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function changeValueHandler(e){
    setName(e.target.value);
  }

  useEffect(() => {
    renderCount.current += 1; //重新渲染一次就加一
  },[name]);

  function focusEvent(){
    inputRef.current.focus();
  }

  return (
    <div className="App">
      <header className="App-header">
        {/* 我們只要在 html 標籤上加上 ref 屬性，就可以透過 inputRef.current.focus() 
         直接讀取 DOM */}
        <input ref={inputRef} value={name} onChange={changeValueHandler} type="text"/>
        <p>渲染次數 {renderCount.current} </p>
        <button onClick={focusEvent}>按鈕</button>
      </header>
    </div>
  );
}

小結：

UseRef 不會重新 Render 元件，但可以更新值，也可以直接獲取 DOM

參考資料

• React 文件
• [React] 理解以 useRef / useState 產生變數的適用情境